js 隔行变色与鼠标悬停自动变色的实现代码

来源:网络整理作者:fen 发布时间:2020-12-25 12:12

如何用js实现隔行变色，以及当鼠标移动到某块区域时自动变色的功能？本文分享一段实现此功能的js代码，希望对大...

一段js效果，实现隔行变色与鼠标移动到某区域时自动变色。
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>隔行变色--</title> <style> .top{ background-color:#F00; color:#006; } table{ border:1px #C06 dashed; border-collapse:collapse; } th,td{ border:#999 1px solid; } .one{ background-color:#ffc; } .two{ background-color:#fcc; } .over{ background-color:#666; } </style> <script language="javascript" type="application/javascript"> function geHang(){ //获取所有的tr var trlist=document.getElementsByTagName("tr"); for(var i=1;i<trlist.length;i++){ //进行遍历，并且判断 if(i%2==0){ trlist[i].className="two"; }else{ trlist[i].className="one"; } var oldcolor; //实现当鼠标移动到该行，该行背景加深、 trlist[i].onmouseover=function(){ oldcolor=this.className; //onmouseover会传匿名函数 this--将鼠标移上去会获取当前值 //重新设置新颜色 this.className="over"; } trlist[i].onmouseout=function(){ //当鼠标离开，自动还原颜色 this.className=oldcolor; } } } /IT之家 //当鼠标移动上来时候，改变当前颜色 function over(trNode){ //把原来的颜色，另存一下 color=trNode.className; //将当前行的颜色设over定为 trNode.className="over"; } //当鼠标移动开时候，把原来的行的颜色设定回来 function out(trNode){ //还原以前的颜色 trNode.className=color; }IT之家/ </script> </head> <body onload="geHang()"> <table> <tr class="top"> <th>姓名</th> <th>年龄</th> <th>籍贯</th> <th>电话</th> <th>邮编</th> </tr> <tr onmouseover="over(this)" onmouseout="out(this)"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onmouseover="over(this)" onmouseout="out(this)"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onmouseover="over(this)" onmouseout="out(this)"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onmouseover="over(this)" onmouseout="out(this)"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onmouseover="over(this)" onmouseout="out(this)"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>

相关热词：

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jq/jc/8888.shtml

上一篇：js检测上传图片的大小

下一篇：JavaScript、jQuery、HTML5、N

js禁止页面复制与保存的方法	js数组操作之基础学习指南
js 动态加载table的tr并隔行换色	有关php操作json格式数据的实例
js 获取鼠标实时坐标的代码	js实现网页标题闪烁效果
jQuery.getScript加载同域JS的代码	js数字格式化、格式化float、金
用缓冲技术提高JSP应用的性能	js导航栏单击事件背景变换(示
jQuery源码分析系列(35) : Ajax j	javascript实现Json查询的方法举例
js判断radio是否被选中的简单例	js统计textrea文本框中字数的代
js 左右悬浮广告的实例代码	js判断屏幕分辨率的方法解析